<template>
  <ul class="imgs">
    <li v-for="(img, i) in images" :key="i">
      <van-image @click="showImg(i)" width="100" height="100" :src="img" />
    </li>
  </ul>
</template>

<script setup lang="ts">
import { showImagePreview } from 'vant'
const show = ref(false)
const props = defineProps({
  data: { type: Array, default: () => [] },
  imgProp: { type: String, default: '' }
})
const images = computed(() => {
  if (props.imgProp) {
    return props.data.map((item: any) => {
      return item[props.imgProp]
    })
  } else {
    return props.data as string[]
  }
})
const showImg = (i: number) => {
  show.value = true
  showImagePreview({
    images: images.value,
    startPosition: i
  })
}
</script>

<style scoped lang="scss">
.imgs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li {
    margin: 8px;
  }
}
</style>
